<template>
  <div class="profile-page">
    <TopHeader />
    <BottomNavigation />
    <div class="back-button-container">
      <el-button 
        type="default" 
        @click="goBack" 
        class="back-button"
        :icon="ArrowLeft"
        text
      >
        返回
      </el-button>
    </div>
    <div class="profile-card">
      <h2>修改密码</h2>
      <el-form :model="form" label-width="80px" class="profile-form">
        <el-form-item label="原密码">
          <el-input v-model="form.oldPassword" type="password" autocomplete="current-password" />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="form.newPassword" type="password" autocomplete="new-password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveProfile" :loading="saving">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import TopHeader from '@/components/TopHeader.vue'
import BottomNavigation from '@/components/BottomNavigation.vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()
const form = ref({
  oldPassword: '',
  newPassword: ''
})
const saving = ref(false)

const saveProfile = async () => {
  if (!form.value.oldPassword || !form.value.newPassword) {
    ElMessage.warning('请填写原密码和新密码')
    return
  }
  saving.value = true
  try {
    const res = await axios.post('http://localhost:8080/hospital5_war/user/updatePassword', {
      userId: userStore.userInfo?.userId,
      oldPassword: form.value.oldPassword,
      newPassword: form.value.newPassword
    })
    if (res.data.success) {
      ElMessage.success('密码修改成功')
      form.value.oldPassword = ''
      form.value.newPassword = ''
    } else {
      ElMessage.error(res.data.message || '密码修改失败')
    }
  } catch (e) {
    if (e?.response?.status === 404) {
      ElMessage.error('接口不存在，请联系管理员')
    } else {
      ElMessage.error('修改失败')
    }
  } finally {
    saving.value = false
  }
}

const goBack = () => {
  router.push('/yonghu/profile-info')
}
</script>

<style scoped>
.profile-page {
  padding: 15px;
  padding-top: 70px;
  padding-bottom: 70px;
  background: #f5f7fa;
  min-height: 100vh;
}

.back-button-container {
  margin-bottom: 20px;
  padding: 0 4px;
}

.back-button {
  font-size: 16px;
  color: #606266;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.back-button:hover {
  color: #165DFF;
  background-color: rgba(22, 93, 255, 0.1);
}

.profile-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(22,93,255,0.08);
  max-width: 400px;
  margin: 40px auto 0 auto;
  padding: 30px 24px 20px 24px;
}
.profile-form {
  margin-top: 20px;
}
</style> 